<template>
  <view class="Title">
    <view style="display: flex; flex-direction: column; height: 150px;">
      <image src="../../static/xmut.jpg" style="height: 100%; width: 100%;"></image>
    </view>
    <view style="display: flex; flex-direction: column; height: 11.2cm;">
      <view class="date" style="flex-direction: row; justify-content: space-around;">
        <button style="width: 100%;" @click="setDates(1)">{{ timeNow }}</button>
        <button style="width: 100%;" @click="setDates(2)">{{ timeTomorrow }}</button>
      </view>
      <view class="select">
        <view style="display:flex;flex-direction: row;">
          <text style="flex:1">自修室</text>
          <u-button @click="gotoSift()">筛选</u-button>
        </view>
        <view style="display:flex;flex-direction: row;">
          <text style="flex: 1;">总数：{{ sumStudyRoom }}</text>
          <text>可用：{{ getFreeSites(1) }}</text>
        </view>
        <view>
          <u-line-progress :percent="getPercent(1)" active-color="#2979ff"></u-line-progress>
        </view>
      </view>
      <view class="select" style="margin-top: 1px;">
        <view style="display:flex;flex-direction: row;">
          <text style="flex:1">外文</text>
          <u-button @click="gotoSift()">筛选</u-button>
        </view>
        <view style="display:flex;flex-direction: row;">
          <text style="flex: 1;">总数：{{ sumForeign }}</text>
          <text>可用：{{ getFreeSites(2) }}</text>
        </view>
        <view>
          <u-line-progress :percent="getPercent(2)" active-color="#2979ff"></u-line-progress>
        </view>
      </view>
      <view class="select" style="margin-top: 1px;">
        <view style="display:flex;flex-direction: row;">
          <text style="flex:1">多媒体室</text>
          <u-button @click="gotoSift()">筛选</u-button>
        </view>
        <view style="display:flex;flex-direction: row;">
          <text style="flex: 1;">总数：{{ sumMultimedia }}</text>
          <text>可用：{{ getFreeSites(3) }}</text>
        </view>
        <view>
          <u-line-progress :percent="getPercent(3)" active-color="#2979ff"></u-line-progress>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {formatDate} from "../../utils/utils";
import ULineProgress from "../../uni_modules/vk-uview-ui/components/u-line-progress/u-line-progress.vue";
import UButton from "../../uni_modules/vk-uview-ui/components/u-button/u-button.vue";

export default {
  components: {UButton, ULineProgress},
  data() {
    return {
      timeNow: formatDate(new Date().getTime(), 'YY-MM-DD'),
      timeTomorrow: formatDate(new Date().getTime() + 24 * 3600000, 'YY-MM-DD'),
      sumStudyRoom: 250,
      sumForeign: 160,
      sumMultimedia: 200,
      dates: 1,
    }
  },
  methods: {
    getState() {


    },
    gotoSift() {
      uni.navigateTo({url: '/pages/order/sift'});
    },
    setDates(date) {
      if (date === 1) {
        this.dates = 1;
      } else if (date === 2) {
        this.dates = 2;
      }
    },

    getFreeSites(num) {
      if (this.dates === 1) {
        switch (num) {
          case 1:
            return 20;
          case 2:
            return 40;
          case 3:
            return 100;
          default:
            break;
        }
      } else if (this.dates === 2) {
        switch (num) {
          case 1:
            return 100;
          case 2:
            return 40;
          case 3:
            return 20;
          default:
            break;
        }
      }
    },
    getPercent(num) {
      switch (num) {
        case 1:
          return this.getFreeSites(1, this.dates) * 100 / this.sumStudyRoom;
        case 2:
          return this.getFreeSites(2, this.dates) * 100 / this.sumForeign;
        case 3:
          return this.getFreeSites(3, this.dates) * 100 / this.sumMultimedia;
        default:
          break;
      }
    }
  }
}
</script>

<style>
.select {
  height: 2.95cm;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.date {
  height: 1.3cm;
  width: 100%;
  display: flex;
  align-items: center;
}
</style>
